<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %>
<html>
<head>
    <meta charset="utf-8">
    <!-- 360浏览器极速模式 -->
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>上传棋盘</title>
    <%@ include file="/pages/common/head.jsp" %>
</head>
<body>
<form action="boardServlet?action=upload" method="post"
      enctype="multipart/form-data">
    棋盘名: <input type="text" autocomplete="off" name="name" id="boardName">
    <span class="errorMsg" id="nameErrMsg"></span><br>
    价格: <input type="text" autocomplete="off" name="price" id="price">
    <span class="errorMsg" id="priceErrMsg"></span>
    <br/><br/>
    <input type="file" autocomplete="off" name="boardImgFile" id="boardImgFile">
    <span class="errorMsg" id="fileErrMsg"></span>
    <br/><br/>
    <input type="reset" value="重置" id="reset_btn">&nbsp;&nbsp;
    <input type="submit" value="上传" id="sub_btn">
    <input type="hidden" value="${requestScope.adminId}" name="adminId">
</form>
<script type="text/javascript">
    $(function () {
        let nameLegal = false;
        let priceLegal = false;
        let fileNameLegal = false;
        let existsName = false;

        $('#boardName').blur(function () {
            const name = $.trim(this.value);
            const namePattern = /[\S]+$/;
            if (!namePattern.test(name)) {
                nameLegal = false;
                $('#nameErrMsg').text('棋盘名不合法！');
                return;
            }
            nameLegal = true;
            $.getJSON("boardServlet?action=checkExists", {
                name: name
            }, function (exists) {
                existsName = exists;
                if (existsName) {
                    $('#nameErrMsg').text('棋盘名已存在！')
                    return
                }
                $('#nameErrMsg').text('')
            });
        });

        $('#price').blur(function () {
            const price = $.trim(this.value);
            const pricePattern = /^\d+(\.\d+)?$/;
            if (!pricePattern.test(price)) {
                priceLegal = false;
                $('#priceErrMsg').text('价格格式不正确！');
                return;
            }
            priceLegal = true;
            $('#priceErrMsg').text('');
        });

        $('#boardImgFile').change(function () {
            if (this.value) {
                const fileName = this.files[0].name;
                if (!fileName.endsWith(".jpg")) {
                    fileNameLegal = false;
                    $('#fileErrMsg').text('文件类型不合法');
                    return;
                }
                fileNameLegal = true;
                $('#fileErrMsg').text('');
            }
        });

        $('#reset_btn').click(function () {
            $('span.errorMsg').text('');
        });

        $('#sub_btn').click(function () {
            if (!nameLegal || existsName) {
                $('#boardName').focus();
                return false;
            }
            if (!priceLegal) {
                $('#price').focus();
                return false;
            }
            if (!$('#boardImgFile').val()) {
                $('#fileErrMsg').text('请选择文件!');
                return false;
            }
            if (!fileNameLegal) {
                return false;
            }
        });
    });
</script>
</body>
</html>
